API Web Performance : Mesurer le temps pour des expériences utilisateur supérieures

Dans le paysage numérique actuel, un site web rapide et réactif n'est plus un luxe ; c'est une nécessité. Les utilisateurs s'attendent à des expériences fluides, et même un léger retard peut entraîner de la frustration, des paniers abandonnés et, en fin de compte, une perte de revenus. Les API Web Performance fournissent aux développeurs les outils nécessaires pour mesurer avec précision divers aspects de la performance d'un site web, leur permettant d'identifier les goulots d'étranglement et d'optimiser l'expérience utilisateur (UX).

Comprendre l'importance des métriques de l'expérience utilisateur

Avant de plonger dans les détails techniques des API, il est crucial de comprendre pourquoi les métriques UX sont si importantes. Elles offrent un moyen quantifiable d'évaluer comment les utilisateurs perçoivent la vitesse et la réactivité de votre site web. Une mauvaise UX peut avoir un impact négatif sur :

• Taux de rebond : Des temps de chargement lents amènent souvent les utilisateurs à quitter votre site web avant d'interagir avec son contenu.
• Taux de conversion : Une expérience utilisateur frustrante peut dissuader les clients potentiels de finaliser leurs transactions.
• Classement dans les moteurs de recherche : Les moteurs de recherche comme Google privilégient les sites web performants, ce qui a un impact sur votre visibilité dans les résultats de recherche. Les Core Web Vitals (Signaux Web Essentiels), qui s'appuient fortement sur les API de performance, sont un facteur de classement.
• Perception de la marque : Un site web lent peut créer une impression négative de votre marque, suggérant un manque d'attention aux détails et une mauvaise expérience utilisateur.

API et métriques clés de la performance web

Plusieurs API Web Performance sont disponibles, chacune offrant des informations uniques sur différents aspects de la performance d'un site web. Voici quelques-unes des plus importantes :

1. API Navigation Timing

L'API Navigation Timing fournit des informations de synchronisation détaillées relatives au chargement d'un document. Elle vous permet de mesurer le temps nécessaire pour différentes étapes du processus de chargement, telles que :

• navigationStart : L'horodatage juste avant que le navigateur ne commence à récupérer le document.
• fetchStart : L'horodatage juste avant que le navigateur ne commence à récupérer le document depuis le réseau.
• domainLookupStart : L'horodatage juste avant que le navigateur ne commence la recherche DNS pour le domaine du document.
• domainLookupEnd : L'horodatage juste après que le navigateur a terminé la recherche DNS.
• connectStart : L'horodatage juste avant que le navigateur ne commence à établir une connexion avec le serveur.
• connectEnd : L'horodatage juste après que le navigateur a fini d'établir une connexion avec le serveur.
• requestStart : L'horodatage juste avant que le navigateur n'envoie la requête HTTP pour le document.
• responseStart : L'horodatage juste après que le navigateur a reçu le premier octet de la réponse HTTP.
• responseEnd : L'horodatage juste après que le navigateur a reçu l'intégralité de la réponse HTTP.
• domLoading : L'horodatage juste avant que le navigateur ne définisse document.readyState sur "loading".
• domInteractive : L'horodatage juste après que le navigateur a analysé le document HTML et que le DOM est prêt.
• domContentLoadedEventStart : L'horodatage juste avant que le navigateur ne déclenche l'événement DOMContentLoaded.
• domContentLoadedEventEnd : L'horodatage juste après que le navigateur a déclenché l'événement DOMContentLoaded.
• domComplete : L'horodatage juste après que le navigateur a défini document.readyState sur "complete".
• loadEventStart : L'horodatage juste avant que le navigateur ne déclenche l'événement load.
• loadEventEnd : L'horodatage juste après que le navigateur a déclenché l'événement load.

Exemple : Calculer le temps nécessaire pour la recherche DNS :

            const navigationTiming = performance.getEntriesByType("navigation")[0];
const dnsLookupTime = navigationTiming.domainLookupEnd - navigationTiming.domainLookupStart;
console.log(`Temps de recherche DNS : ${dnsLookupTime} ms`);
            

              
                Copy
              
            
          

2. API Resource Timing

L'API Resource Timing fournit des informations de synchronisation détaillées pour les ressources individuelles chargées par une page web, telles que les images, les fichiers CSS, les fichiers JavaScript et les polices. Cette API vous aide à identifier les ressources qui prennent le plus de temps à charger et à optimiser leur distribution.

Métriques clés :

• name : L'URL de la ressource.
• startTime : L'horodatage auquel le navigateur commence à récupérer la ressource.
• responseEnd : L'horodatage auquel le navigateur reçoit le dernier octet de la ressource.
• duration : Le temps total nécessaire pour charger la ressource (responseEnd - startTime).
• transferSize : La taille de la ressource transférée sur le réseau.
• encodedBodySize : La taille de la ressource avant compression.
• decodedBodySize : La taille de la ressource après décompression.

Exemple : Identifier l'image la plus grande sur la page :

            const resourceTiming = performance.getEntriesByType("resource");

let largestImage = null;
let largestImageSize = 0;

resourceTiming.forEach(resource => {
  if (resource.initiatorType === "img" && resource.transferSize > largestImageSize) {
    largestImage = resource.name;
    largestImageSize = resource.transferSize;
  }
});

console.log(`Image la plus grande : ${largestImage}, Taille : ${largestImageSize} octets`);
            

              
                Copy
              
            
          

3. API User Timing

L'API User Timing vous permet de définir des métriques de performance personnalisées et de mesurer le temps nécessaire pour des blocs de code spécifiques ou des interactions utilisateur. C'est particulièrement utile pour suivre la performance de fonctions JavaScript critiques ou de composants d'interface utilisateur complexes.

Méthodes clés :

• performance.mark(markName) : Crée un horodatage avec le nom spécifié.
• performance.measure(measureName, startMark, endMark) : Crée une mesure de performance entre deux marqueurs.
• performance.getEntriesByType("measure") : Récupère toutes les mesures de performance.

Exemple : Mesurer le temps de rendu d'un composant React complexe :

            performance.mark("componentRenderStart");

// Code pour le rendu du composant React
render(, document.getElementById("root"));

performance.mark("componentRenderEnd");
performance.measure("componentRenderTime", "componentRenderStart", "componentRenderEnd");

const renderTime = performance.getEntriesByName("componentRenderTime")[0].duration;
console.log(`Temps de rendu du composant : ${renderTime} ms`);
            

              
                Copy
              
            
          

4. API Long Tasks

L'API Long Tasks vous aide à identifier les tâches qui bloquent le thread principal pendant plus de 50 millisecondes. Ces tâches longues peuvent provoquer des saccades de l'interface utilisateur (UI jank) et nuire à l'expérience utilisateur. En identifiant et en optimisant ces tâches, vous pouvez améliorer la réactivité de votre site web.

Exemple : Journaliser les tâches longues dans la console :

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log("Tâche longue :", entry);
  });
});

observer.observe({ type: "longtask", buffered: true });
            

              
                Copy
              
            
          

5. API Paint Timing

L'API Paint Timing expose deux métriques clés relatives au rendu visuel d'une page web :

• First Paint (FP) : Le moment où le navigateur affiche le tout premier pixel à l'écran.
• First Contentful Paint (FCP) : Le moment où le navigateur affiche le premier élément de contenu (par ex., image, texte) à l'écran.

Ces métriques sont cruciales pour comprendre à quelle vitesse les utilisateurs perçoivent le premier retour visuel de votre site web.

Exemple : Récupérer le FCP :

            const paintTiming = performance.getEntriesByType("paint");
const fcpEntry = paintTiming.find(entry => entry.name === "first-contentful-paint");

if (fcpEntry) {
  console.log(`First Contentful Paint : ${fcpEntry.startTime} ms`);
}
            

              
                Copy
              
            
          

6. Largest Contentful Paint (LCP)

Le Largest Contentful Paint (LCP) est un Core Web Vital qui mesure le temps nécessaire pour que le plus grand élément de contenu (par ex., image, vidéo, bloc de texte) devienne visible dans la fenêtre d'affichage. Un bon score LCP indique que le contenu principal de la page se charge rapidement, offrant une meilleure expérience utilisateur.

Ce qu'il faut optimiser pour le LCP :

• Optimiser les images : Utilisez des formats d'image appropriés (par ex., WebP), compressez les images et utilisez des images responsives.
• Optimiser le CSS : Minifiez et compressez les fichiers CSS, et évitez le CSS qui bloque le rendu.
• Optimiser le JavaScript : Différez le JavaScript non critique et évitez les tâches JavaScript de longue durée.
• Temps de réponse du serveur : Assurez-vous que votre serveur répond rapidement aux requêtes.

7. Cumulative Layout Shift (CLS)

Le Cumulative Layout Shift (CLS) est un autre Core Web Vital qui mesure la stabilité visuelle d'une page web. Il quantifie le nombre de décalages de mise en page inattendus qui se produisent pendant le processus de chargement. Un faible score CLS indique que la page est visuellement stable, offrant une expérience utilisateur plus agréable.

Qu'est-ce qui cause les décalages de mise en page :

• Images sans dimensions : Spécifiez toujours les attributs de largeur et de hauteur pour les images.
• Publicités, contenus intégrés et iframes sans espace réservé : Réservez de l'espace pour ces éléments afin d'éviter qu'ils ne provoquent des décalages de mise en page.
• Contenu injecté dynamiquement : Soyez prudent lors de l'injection dynamique de contenu, car cela peut provoquer des décalages de mise en page inattendus.
• Polices web provoquant FOIT/FOUT : Optimisez le chargement des polices pour minimiser l'impact du Font-Of-Invisible-Text (FOIT) et du Font-Of-Unstyled-Text (FOUT).

8. Interaction to Next Paint (INP)

L'Interaction to Next Paint (INP) est une métrique Core Web Vital qui mesure la réactivité d'une page web aux interactions de l'utilisateur. Elle évalue la latence de tous les clics, tapotements et interactions clavier qu'un utilisateur effectue lors de sa visite sur une page. L'INP remplace le First Input Delay (FID) comme Core Web Vital en mars 2024.

Améliorer l'INP :

• Optimiser l'exécution de JavaScript : Décomposez les tâches longues en plus petits morceaux asynchrones pour éviter de bloquer le thread principal.
• Différer le JavaScript non critique : Ne chargez que le JavaScript nécessaire au rendu initial et différez le reste.
• Utiliser des Web Workers : Déchargez les tâches gourmandes en calcul vers des Web Workers pour les empêcher de bloquer le thread principal.
• Optimiser les gestionnaires d'événements : Assurez-vous que les gestionnaires d'événements sont efficaces et évitent d'effectuer des opérations inutiles.

Exemples pratiques et extraits de code

Voici quelques exemples pratiques sur la façon d'utiliser les API Web Performance pour mesurer et optimiser la performance d'un site web :

Exemple 1 : Mesurer le temps de chargement de la page

            window.addEventListener("load", () => {
  const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
  console.log(`Temps de chargement de la page : ${loadTime} ms`);
});
            

              
                Copy
              
            
          

Exemple 2 : Identifier les ressources à chargement lent

            const resourceTiming = performance.getEntriesByType("resource");

resourceTiming.forEach(resource => {
  if (resource.duration > 1000) {
    console.warn(`Ressource lente : ${resource.name}, Durée : ${resource.duration} ms`);
  }
});
            

              
                Copy
              
            
          

Exemple 3 : Mesurer le Time to Interactive (TTI) - Approximation

Note : Le TTI est une métrique complexe, et ceci est une approximation simplifiée. Le véritable TTI nécessite une approche plus sophistiquée.

            function getTimeToInteractive() {
  return new Promise(resolve => {
    if (document.readyState === 'complete') {
      resolve(performance.now());
    } else {
      window.addEventListener('load', () => {
        resolve(performance.now());
      });
    }
  });
}

getTimeToInteractive().then(tti => {
  console.log(`Temps approximatif avant interactivité : ${tti} ms`);
});
            

              
                Copy
              
            
          

Informations exploitables pour optimiser l'expérience utilisateur

Une fois que vous avez collecté des données de performance à l'aide des API Web Performance, vous pouvez utiliser les informations exploitables suivantes pour optimiser l'expérience utilisateur de votre site web :

• Optimiser les images : Compressez les images, utilisez des formats d'image appropriés (par ex., WebP) et utilisez des images responsives pour réduire les temps de chargement des images.
• Minifier et compresser le code : Minifiez et compressez les fichiers HTML, CSS et JavaScript pour réduire leur taille et améliorer les temps de chargement.
• Tirer parti de la mise en cache du navigateur : Configurez votre serveur pour définir les en-têtes de cache appropriés afin d'activer la mise en cache par le navigateur des ressources statiques.
• Utiliser un réseau de distribution de contenu (CDN) : Distribuez le contenu de votre site web sur plusieurs serveurs géographiquement pour réduire la latence pour les utilisateurs dans différents endroits. Les fournisseurs de CDN populaires incluent Cloudflare, Akamai et Amazon CloudFront.
• Optimiser le chargement des polices : Utilisez font-display: swap pour empêcher le blocage des polices et améliorer la vitesse de chargement perçue de votre site web.
• Réduire les requêtes HTTP : Minimisez le nombre de requêtes HTTP en combinant les fichiers CSS et JavaScript, en intégrant le CSS critique (inlining) et en utilisant des sprites CSS.
• Différer les ressources non critiques : Différez le chargement des ressources non critiques, telles que les images et les fichiers JavaScript, jusqu'à après le chargement initial de la page.
• Optimiser les temps de réponse du serveur : Assurez-vous que votre serveur répond rapidement aux requêtes en optimisant votre code côté serveur et vos requêtes de base de données.
• Surveiller régulièrement la performance : Surveillez en continu la performance de votre site web à l'aide des API Web Performance et d'autres outils de surveillance de la performance pour identifier et résoudre tout problème de performance. Des outils comme Google PageSpeed Insights, WebPageTest et Lighthouse peuvent fournir des informations précieuses.

Outils et bibliothèques pour la surveillance de la performance

Plusieurs outils et bibliothèques peuvent vous aider à surveiller et analyser la performance d'un site web à l'aide des API Web Performance :

• Google PageSpeed Insights : Un outil gratuit qui analyse la performance de votre site web et fournit des recommandations d'amélioration.
• WebPageTest : Un outil gratuit qui vous permet de tester la performance de votre site web depuis différents endroits et navigateurs.
• Lighthouse : Un outil open-source et automatisé pour améliorer la qualité des pages web. Il propose des audits pour la performance, l'accessibilité, les applications web progressives, le SEO et plus encore.
• New Relic : Une plateforme complète de surveillance de la performance qui fournit des informations en temps réel sur la performance du site web.
• Datadog : Une plateforme de surveillance et d'analyse qui offre une visibilité sur l'ensemble de votre infrastructure, y compris la performance du site web.
• Sentry : Une plateforme de suivi des erreurs en temps réel et de surveillance de la performance.
• Web Vitals Chrome Extension : Une extension Chrome qui affiche les métriques Core Web Vitals en temps réel.

Considérations pour une audience mondiale

Lors de l'optimisation de la performance d'un site web pour une audience mondiale, il est important de prendre en compte les facteurs suivants :

• Localisation géographique : Utilisez un CDN pour distribuer votre contenu sur plusieurs serveurs géographiquement, réduisant ainsi la latence pour les utilisateurs dans différents endroits.
• Conditions du réseau : Optimisez votre site web pour les utilisateurs ayant des connexions réseau lentes ou peu fiables en utilisant des techniques telles que la compression d'images, la minification du code et la mise en cache du navigateur.
• Capacités des appareils : Optimisez votre site web pour différents appareils, y compris les téléphones mobiles, les tablettes et les ordinateurs de bureau, en utilisant un design responsive et des techniques de chargement adaptatif.
• Langue et localisation : Assurez-vous que votre site web est localisé pour différentes langues et régions, y compris la traduction du contenu et l'ajustement des mises en page pour différentes directions de texte.
• Accessibilité : Assurez-vous que votre site web est accessible aux utilisateurs handicapés en suivant les directives d'accessibilité telles que les WCAG.

Conclusion

Les API Web Performance fournissent des outils précieux pour mesurer et optimiser la performance des sites web. En comprenant et en utilisant ces API, les développeurs peuvent identifier les goulots d'étranglement de la performance, améliorer l'expérience utilisateur et, en fin de compte, favoriser le succès de l'entreprise. N'oubliez pas de donner la priorité aux Core Web Vitals (LCP, CLS et INP) en tant que métriques clés pour la santé globale du site web et la satisfaction des utilisateurs. En surveillant et en optimisant continuellement la performance de votre site web, vous pouvez garantir une expérience rapide, réactive et engageante pour les utilisateurs du monde entier.